
<template>
    <div class="pane">
        <el-row
            :span="24"
            class="paneRow"
        >
            <el-col :span="12">
                <div class="paneCon">
                    <div class="positionDiv">
                        <!-- <el-tag
                            class="hasNew"
                        >
                            本年度
                        </el-tag> -->
                        <b class="_619add">
                          用户付费成功率
                        </b>
                        <span>
                            {{(payPart.payConversionRatio).toLocaleString('en-US')}}
                        </span>
                    </div>
                    <div>
                        口径：付费用户数{{(payPart.payNum).toLocaleString('en-US')}}人  / 下单用户数 {{(payPart.orderNum).toLocaleString('en-US')}}人
                    </div>
                </div>
                <div>
                    <span v-if="showCompareDate" class="ratio">
                      <span v-show="parseFloat(payPart.payConversionRateComparison) >= 0"><img class="radio-icon" src="@/assets/img/up.png" alt=""></span>
                      <span v-show="parseFloat(payPart.payConversionRateComparison) < 0"><img class="radio-icon" src="@/assets/img/down.png" alt=""></span>
                      <div v-show="payPart.payConversionRateComparison !== '--'" class="radio-txt">{{Math.abs(parseFloat(payPart.payConversionRateComparison)).toLocaleString('en-US')}}%</div>
                      <div v-show="payPart.payConversionRateComparison === '--'" class="radio-txt" style="margin-top: 0!important">
                        <el-tooltip effect="dark" placement="top">
                          <div slot="content" class="tooltips">
                            <p>对比日期下指标数据为0，所以无法对比！</p>
                          </div>
                          <p>{{payPart.payConversionRateComparison}}</p>
                        </el-tooltip>
                      </div>
                    </span>
                   <!-- <span v-if="showCompareDate" class="pointer" @click='jumpto("/home/analyze",{id:1})'>
                       分析
                   </span> -->
                </div>
            </el-col>
            <el-col :span="12">
                <div class="paneCon">
                    <div class="positionDiv">
                        <b class="_619add">付费客单价</b>
                        <span>
                            ¥{{(payPart.customUnitRatio).toLocaleString('en-US')}}
                        </span>
                    </div>
                    <div>
                        口径：付款金额￥{{(payPart.payPrice).toLocaleString('en-US')}} /  付费用户数{{(payPart.payNum).toLocaleString('en-US')}}人
                    </div>
                </div>
                <div>
                  <span v-if="showCompareDate" class="ratio">
                    <span v-show="parseFloat(payPart.customerUnitPriceComparison) >= 0"><img class="radio-icon" src="@/assets/img/up.png" alt=""></span>
                    <span v-show="parseFloat(payPart.customerUnitPriceComparison) < 0"><img class="radio-icon" src="@/assets/img/down.png" alt=""></span>
                    <div v-show="payPart.customerUnitPriceComparison !== '--'" class="radio-txt">{{Math.abs(parseFloat(payPart.customerUnitPriceComparison)).toLocaleString('en-US')}}%</div>
                      <div v-show="payPart.customerUnitPriceComparison === '--'" class="radio-txt" style="margin-top: 0!important">
                        <el-tooltip effect="dark" placement="top">
                          <div slot="content" class="tooltips">
                            <p>对比日期下指标数据为0，所以无法对比！</p>
                          </div>
                          <p>{{payPart.payConversionRateComparison}}</p>
                        </el-tooltip>
                      </div>
                  </span>
                   <!-- <span v-if="showCompareDate" class="pointer" @click='jumpto("/home/analyze",{id:1})'>
                       分析
                   </span> -->
                </div>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import { jumpto } from "@/utils/index"
export default {
    name: 'analyze',
    props: {
        dataReportInfoYear: {
            type: Object,
            default: () => { }
        },
        payPart: {
          type: Object,
          default: () => {},
        },
        showCompareDate:{
          type: Boolean,
          default: () => { return false }
        }
    },
    components: {
    },
    data () {
        return {
            jumpto
        }
    },
    computed: {
    },
    created () {
    },
    mounted () {
    },
    methods: {
        changeDate () {
        }
    }
}
</script>
<style lang="scss" scoped>
.ratio{
  font-size: 17px;
  margin-top: 25px;
}
.radio-icon{
  width: 25px!important;
  height: 28px!important;
}
.radio-txt{
  margin-top: -29px;
  margin-left: 50px;
}
.pane {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    .paneRow {
        width: 100%;
        box-shadow: 0px 2px 11px 0px rgba(228, 233, 238, 1);
    }
    .pointer {
        cursor: pointer;
    }
    ._619add {
        color: #619add;
    }
    .el-col {
        align-self: center;
        text-indent: 25px;
        padding: 0 2%;
        height: 138px;
        border-radius: 4px;
        display: flex;
        // flex-direction: column;
        justify-content: space-between;
        align-items: center;
        position: relative;
        background: #fff;
        font-size: 14px;
        color: #999999;
        img {
            height: 48px;
            width: 44px;
            margin-top: 10px;
            margin-left: 25px;
        }
        .paneCon {
            div {
                height: 30px;
                line-height: 0px;
            }
            div:nth-of-type(1) {
                height: 20px;
                font-size: 14px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                line-height: 20px;
            }
            .positionDiv {
              height: 65px!important;
              line-height: 65px!important;
                span {
                    font-weight: 500;
                    font-size:24px;
                    color:#000;
                }
            }
        }
    }
    .hasNew {
        text-indent: 0;
        width: 54px;
        height: 23px;
        line-height: 23px;
        border-color: transparent;
        position: absolute;
        top: 10px;
        right: 0;
        border-radius: 30px 0 0 30px;
        background: #fff4f0;
        color: #d24a19;
    }
}
</style>
